<template>
  <!-- 金字塔形状 -->
  <div class="echart_pyramids" ref="chart"></div>
</template>

<script>
export default {
  props: {
    unit:String,
    data: Array,
    option: Object
  },
  data() {
    return {
      pdata: [],
      defaultColors: [
        "#5B90F9",
        "#00C13E",
        "#65789B",
        "#F6BD15",
        "#7162FD",
        "#78D4F8",
        "#9560BC",
        "#FF5E00",
        "#008685",
        "#E80000"
      ]
    };
  },
  mounted() {
    this.init();
    window.addEventListener("resize", this.screenAdapter);
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    init() {
      // this.pdata = this.data;
      this.pdata = JSON.parse(JSON.stringify(this.data));
      this.handleData(this.pdata);
      this.initChart();
    },
    initChart() {
      const chart = this.$refs.chart;
      if (chart) {
        if (this.chartInstance) {
          this.chartInstance.dispose();
        }
      }
      this.chartInstance = echarts.init(chart);
      const initOption = {
        color: this.defaultColors,
        tooltip: {
          trigger: "item",
          formatter: function(arg) {
            return arg.data.name;
          }
        },
        legend: {
          show: this.option.legend || false,
          top: this.option.legendPositionTop || "top",
          left: this.option.legendPositionLeft || "right",
          icon: this.option.legendIcon || "",
          // 设置纵横效果
          orient: this.option.legendOrient || "horizontal",
          itemWidth: 11,
          itemHeight: 7,
          textStyle: {
            color: this.option.legendColor || "#333",
            fontSize: this.option.legendFontSize || 12
          }
        },
        series: [
          {
            name: "漏斗图",
            type: "funnel",
            // left: "10%",
            left: "center",
            // right:'20%',
            top: 0,
            //x2: 80,
            bottom: 10,
            width: "50%",

            minSize: "0%",
            maxSize: "100%",
            sort: "ascending",
            gap: 2,
            label: {
              show: this.option.labelShow || false,
              position: "right",
              fontSize: 14
            },
            labelLine: {
              length: 22,
              lineStyle: {
                width: 1,
                type: "solid"
              }
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 15
              }
            },
            data: this.pdata
          }
        ]
      };
      this.chartInstance.setOption(initOption);
    },
    updateChart() {
      const dataOption = {
        legend: {
          data: p.data
        }
      };
      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const adapterOption = {};
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    handleData(data) {
      // 排序
      data.sort((o1, o2) => {
        return o1.num - o2.num;
      });
      // 相隔20能保证为是三角形
      let v = 0;
      this.pdata = data.map(item => {
        v += 20;
        return {
          value: v,
          name: item.name + ":" + item.num + this.unit,
          num: item.num
        };
      });
    }
  },
  watch: {
    option: {
      handler(val, oldval) {
        if (val) this.init();
      },
      deep: true,
      // immediate: true
    },
    data: {
      handler(val, oldval) {
        if (val) this.init();
      },
      deep: true
    },
    unit(val, oldval) {
      this.init();
    }
  }
};
</script>
